<template>
  <div class="selectLinkMan" ref="homePage">
    <div class="bj">
      <van-nav-bar @click-left="clickleft()" style="background: #ececec;" title="旅客" left-text="" left-arrow>
      </van-nav-bar>
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div class="xuanzhe">
      <van-radio-group v-model="radio" @change="change" >
        <div class="yd-checklist-item" v-for="(itme,index) in datalist" :key="index">
          <van-radio checked-color="#46d0ca" style="margin-right: 0.75rem;" :name="itme.piSN">
            <div>{{itme.RealName}} {{itme.Mobile}} {{itme.IDCardNo}}</div>
          </van-radio>
        </div>
       <!-- <div class="yd-checklist-item">
          <van-radio checked-color="#46d0ca" style="margin-left: 0.75rem;" name="2">单选框 2</van-radio>
        </div> -->
      </van-radio-group>
      <div style="width: 100%;display: flex;align-items: center;height: 100px;justify-content: center;">
        <van-button style="width: 80%;" color="#46d0ca" type="default">确认</van-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    PassengerList,
  } from '@/api/home.js'
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        radio: '',
        datalist:[],
      }
    },
    // beforeRouteEnter(to, from, next) {
    //     to.meta.keepAlive = true;
    //     next();
    // },
    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      this.PassengerList()
    },
    methods:{
      clickleft() {
        this.$router.go(-1);
        // console.log(1)
      },
      change(name){
        console.log(this.datalist)
        this.datalist.forEach((v)=>{
          if(v.piSN == name){
            console.log(v.RealName)
          }
        })
      },
      PassengerList(){
        let data = {}
        PassengerList(data).then(res=>{
          // console.log(res)
          this.datalist = res.List
          this.datalist.forEach((v,i)=>{
            // console.log(v)
            if(v.IsDefault == true){
              this.radio = v.piSN
              // console.log(this.radio)
            }
          })
        })
      },
    }
  }
</script>

<style lang="scss">
  .selectLinkMan {
    // .van-nav-bar {
    //   .van-nav-bar__left {
    //     .van-icon {
    //       color: #46d0ca !important;
    //       font-size: 1.25rem;
    //     }
    //   }

    // }
    .bj{
      .van-icon {
        color: white !important;

      }
    }
    .xuanzhe{
      .yd-checklist-item {
        display: flex;
        position: relative;
        // margin-left: 0.75rem;
        height: 3.125rem;
        align-items: center;
        background: white;
        border-bottom: 0.0625rem solid #eee;
        .van-checkbox__icon--checked .van-icon {
          background-color: #46d0ca !important;
          border-color: #46d0ca !important;

        }

        .van-icon {
          color: white !important;
          font-size: 16px !important;
        }
      }
    }

  }
</style>
